:root {
    color-scheme: light dark;
    --element-banner-background-colour: #eeeeee;
    --heading-panel-background-colour: #eeeeee;
    --heading-panel-text-colour: #222222;
    --heading-panel-succeeded-background-colour: #E6FFE6;
    --heading-panel-failed-background-colour: #f69Ca6;
    --heading-panel-alt-text-colour: #ffffff;
	--heading-panel-alt-background-colour: #808080;

    --heading-row-background-colour: #e0e0e0;
    --stripe-one-background-colour: #ffffff;
    --stripe-two-background-colour: #f3f6fa;
    --stripe-tinted-background-colour: #808080;

	--index-plain-text-colour: #000000;
	--index-tinted-text-colour: #808080;
	--index-dark-text-colour: #505050;
    --index-dull-red-colour: #800000;
    --index-dull-blue-colour: #000080;
    --index-dull-green-colour: #008000;
    --index-map-room-border-colour: #000000;
    --index-map-room-number-colour: #202020;
    --index-response-letter-colour: #ffffff;
    --index-response-letter-background-colour: #8080ff;
    --index-response-text-colour: #000066;
    --index-figure-background-colour: #6495ed;
    --periodic-table-sidebar-colour: #888;
    --periodic-table-sidebar-hover-colour: #222;
    --periodic-table-element-text-colour: #ffffff;
    --leaders-background-colour: white;
    --library-card-title-colour: #803030;
    --library-card-other-colour: #303030;
    --index-more-box-background-colour: #e0e0e0;
    --index-activity-contents-background-colour: #e8e0c0;
    --registry-contents-silent-link-colour: #000000;
    --registry-contents-passive-link-colour: #202020;
    --registry-contents-active-link-colour: #D00000;

    --extension-index-entry-colour: #404040;
    --extension-index-name-colour: #ffffff;
    --extension-index-error-colour: #ff8080;

    --safe-button-background-colour: rgb(31, 136, 61);
    --dangerous-button-background-colour: rgb(136, 31, 61);
	--button-text-background-colour: #ffffff;
	
	--syntaxdefinition-colour: #000040;
	--syntaxheading-colour: #7f0000;
	--syntaxfunction-colour: #5f0000;
	--syntaxreserved-colour: #000040;
	--syntaxelement-colour: #000040;
	--syntaxidentifier-colour: #000040;
	--syntaxcharacter-colour: #000040;
	--syntaxconstant-colour: #000040;
	--syntaxstring-colour: #0000ff;
	--syntaxplain-colour: #000040;
	--syntaxextract-colour: #FF00e0;
	--syntaxcomment-colour: #004000;

    --paste-active-colour: #803030;
    --paste-passive-colour: #303030;
    --paste-background-colour: #FFD580;

    --md-background-colour: #e3e6ea;
    --md-transcript-background-colour: #f9e9e9;
    --md-code-background-colour: #e9e9f9;
    --md-dashed-border-colour: #2f6fab;
    --md-extract-inform7-box-colour: #FFFDE0;
    --md-extract-problem-box-colour: #e9f9e9;
    --md-extract-code-box-colour: #e9f9e9;
    --md-shaded-box-colour: #e9e9e9;
    --md-transcript-deletion-colour: #ff0000;
    --md-transcript-insertion-colour: #00ff00;
    --example-see-also-colour: #E0E0E0;
    --light-border-colour: #d0d7de;
    
    --documentation-index-majuscule-letter-colour: #ffffff;
    --documentation-index-majuscule-colour: #808080;
    --documentation-index-see-colour: #666666;
    --documentation-index-gloss-colour: #008080;
    --documentation-index-a-colour: #000080;
    --documentation-index-b-colour: #8080ff;
    --documentation-index-c-colour: #186000;
    --documentation-index-letter-active-bg-colour: #c0c0c0;
    --documentation-index-letter-passive-bg-colour: #e0e0e0;

    --problem-bad-colour: #800000;
    --problem-good-colour: #008000;
    --problem-phrase-colour: #808080;
    --problem-token-colour: #e00060;
    --problem-token-desc-colour: #4040ff;
    --problem-token-value-colour: #ff4040;

    --documentation-duplex-paper-colour: #000000;
    --documentation-duplex-left-colour: #eeeeee;
    --documentation-duplex-right-colour: #ffffe5;
    --documentation-nav-heading-background-colour: #eeeeee; 
    --documentation-nav-background-colour: #FFFFFF;
    --documentation-nav-heading-colour: #222222;
    --documentation-nav-active-link-colour: #D00000;
    --documentation-nav-passive-link-colour: #202020;

	--dotted-link-underline-colour: #666666;
	--registry-section-colour: #666666;
	--registry-button-text-colour: #000000;
	--registry-builtin-text-colour: #888888;
	--registry-installed-button-colour: #ffffff;
	--registry-uninstalled-button-colour: #ffffdd;
	--registry-button-border-colour: #000000;
	--registry-button-revealer-colour: #444444;
	--registry-button-update-colour: #aaddff;
	--registry-button-revert-colour: #ddaaff;

	--example-cartouche-border-colour: #202030;
	--example-cartouche-background-colour: #f4f4f4;
    --example-cartouche-label-colour: #000000;
    --example-cartouche-label-background-colour: #C0C0C0;
	--example-cartouche-star-colour: #DFB700;
}

@media (prefers-color-scheme: dark) {
  :root {
    --element-banner-background-colour: #444444;
    --heading-panel-background-colour: #444444;
    --heading-panel-text-colour: #ffffff;
    --heading-panel-succeeded-background-colour: #738073;
    --heading-panel-failed-background-colour: #7b4e53;
    --heading-panel-alt-text-colour: #000000;
	--heading-panel-alt-background-colour: #808080;

    --heading-row-background-colour: #707070;
    --stripe-one-background-colour: #000000;
    --stripe-two-background-colour: #090b0d;
    --stripe-tinted-background-colour: #808080;

	--index-plain-text-colour: #ffffff;
	--index-tinted-text-colour: #808080;
	--index-dark-text-colour: #B0B0B0;
    --index-dull-red-colour: #c00000;
    --index-dull-blue-colour: #4040c0;
    --index-dull-green-colour: #40c040;
    --index-map-room-border-colour: #ffffff;
    --index-map-room-number-colour: #e0e0e0;
    --index-response-letter-colour: #000000;
    --index-response-letter-background-colour: #8080ff;
    --index-response-text-colour: #ffffaa;
    --index-figure-background-colour: #6495ed;
    --periodic-table-sidebar-colour: #555;
    --periodic-table-sidebar-hover-colour: #222;
    --periodic-table-element-text-colour: #000000;
    --leaders-background-colour: #121212;
    --library-card-title-colour: #a05050;
    --library-card-other-colour: #505050;
    --index-more-box-background-colour: #444444;
    --index-activity-contents-background-colour: #727060;
    --registry-contents-silent-link-colour: #ffffff;
    --registry-contents-passive-link-colour: #ffffff;
    --registry-contents-active-link-colour: #40ffff;

    --extension-index-entry-colour: #c0c0c0;
    --extension-index-name-colour: #000000;
    --extension-index-error-colour: #008080;
   
    --safe-button-background-colour: rgb(31, 136, 61);
    --dangerous-button-background-colour: rgb(136, 31, 61);
	--button-text-background-colour: #ffffff;
 	
	--syntaxdefinition-colour: #e0e0ff;
	--syntaxheading-colour: #7f0000;
	--syntaxfunction-colour: #ffe0e0;
	--syntaxreserved-colour: #e0e0ff;
	--syntaxelement-colour: #e0e0ff;
	--syntaxidentifier-colour: #e0e0ff;
	--syntaxcharacter-colour: #e0e0ff;
	--syntaxconstant-colour: #e0e0ff;
	--syntaxstring-colour: #c0c0ef;
	--syntaxplain-colour: #e0e0ff;
	--syntaxextract-colour: #ff8000;
	--syntaxcomment-colour: #e0e0ff;

    --paste-active-colour: #a05050;
    --paste-passive-colour: #505050;
    --paste-background-colour: #090b0d;

    --md-background-colour: #090b0d;
    --md-transcript-background-colour: #091919;
    --md-code-background-colour: #191909;
    --md-dashed-border-colour: #CfAf32;
    --md-extract-inform7-box-colour: #123456;
    --md-extract-problem-box-colour: #1f111f;
    --md-extract-code-box-colour: #1f111f;
    --md-shaded-box-colour: #111111;
    --md-transcript-deletion-colour: #ffdddd;
    --md-transcript-insertion-colour: #ddffdd;
    --light-border-colour: #30373e;
    
    --documentation-index-majuscule-letter-colour: #000000;
    --documentation-index-majuscule-colour: #808080;
    --documentation-index-see-colour: #AAAAAA;
    --documentation-index-gloss-colour: #ff8080;
    --documentation-index-a-colour: #ffff80;
    --documentation-index-b-colour: #808000;
    --documentation-index-c-colour: #d8A0ff;
    --documentation-index-letter-active-bg-colour: #3f3f3f;
    --documentation-index-letter-passive-bg-colour: #202020;

    --problem-bad-colour: #80ffff;
    --problem-good-colour: #ff80ff;
    --problem-phrase-colour: #808080;
    --problem-token-colour: #20ffa0;
    --problem-token-desc-colour: #C0C0ff;
    --problem-token-value-colour: #00c0c0;

    --documentation-duplex-paper-colour: #ffffff;
    --documentation-duplex-left-colour: #111111;
    --documentation-duplex-right-colour: #00001a;
    --documentation-nav-heading-background-colour: #111111; 
    --documentation-nav-background-colour: #000000;
    --documentation-nav-heading-colour: #E0E0E0;
    --documentation-nav-active-link-colour: #300000;
    --documentation-nav-passive-link-colour: #E0E0E0;

	--dotted-link-underline-colour: #AAAAAA;
	--registry-section-colour: #AAAAAA;
	--registry-button-text-colour: #ffffff;
	--registry-builtin-text-colour: #777777;
	--registry-installed-button-colour: #000000;
	--registry-uninstalled-button-colour: #000022;
	--registry-button-border-colour: #ffffff;
	--registry-button-revealer-colour: #bbbbbb;
	--registry-button-update-colour: #114400;
	--registry-button-revert-colour: #224400;

	--example-cartouche-border-colour: #E0E0D0;
	--example-cartouche-background-colour: #222211;
    --example-cartouche-label-colour: #ffffff;
    --example-cartouche-label-background-colour: #FF2020;
	--example-cartouche-star-colour: #FFD700;
   }
}

/* The default font (family) and size */

body, p, td {
    font-family: var(--informdefault-fontfamily);
    -webkit-font-smoothing: antialiased;
    font-size: 0.8rem; /* 12/12 * 100/125 */
}

/* For fixed-point material within text, such as the typing on the Library Card index page */

span.typewritten {
    font-family: var(--informmonospaced-fontfamily);
    font-size: 0.867rem; /* 13/12 * 100/125 */
}

/* For less important material: the small print */

span.smaller {
    font-size: 80%;
}

/* The "heading panel" is the coloured box, high up on the page. The colours
vary depending on the page: for example, the style on a report of a translation
with no problems is "headingpanelsucceeded", usually green, but if there were
problems then "headingpanelfailed" is used, which is usually red. "headingpanel"
itself is a more neutral grey by default. "headingpanelDark" is an alternative
look to make the extensions index pages have some visual contrast with the others;
by default they are a darker grey. */

.headingpanel {
    background: var(--heading-panel-background-colour);
}
.headingpanelsucceeded {
    background: var(--heading-panel-succeeded-background-colour);
}
.headingpanelfailed {
    background: var(--heading-panel-failed-background-colour);
}
.headingpanelalt {
    background: var(--heading-panel-alt-background-colour);
}

/* Heading panels have two lines of text: an upper one in a larger size, and a
lower one in a smaller. Again, the alt versions are meant to contrast.

    Report on Translation: Succeeded                <-- headingpaneltext
    Produced by Inform 10.1.0 (build 6U97)          <-- headingpanelrubric

    Installed Extensions                            <-- headingpaneltextalt
    Bundles of extra rules or phrases to...         <-- headingpanelrubricalt

*/

span.headingpaneltext {
    color: var(--heading-panel-text-colour);
    font-family: var(--informdefault-fontfamily);
    -webkit-font-smoothing: antialiased;
    font-size: 1.333rem; /* 20/12 * 100/125 */
    font-weight: bold;
}
span.headingpaneltextalt {
    color: var(--heading-panel-alt-text-colour);
    font-family: var(--informdefault-fontfamily);
    -webkit-font-smoothing: antialiased;
    font-size: 1.333rem; /* 20/12 * 100/125 */
    font-weight: bold;
}

span.headingpanelrubric {
    color: var(--heading-panel-text-colour);
    font-family: var(--informdefault-fontfamily);
    -webkit-font-smoothing: antialiased;
    font-size: 0.733rem; /* 11/12 * 100/125 */
    font-weight: bold;
}
span.headingpanelrubricalt {
    color: var(--heading-panel-alt-text-colour);
    font-family: var(--informdefault-fontfamily);
    -webkit-font-smoothing: antialiased;
    font-size: 0.733rem; /* 11/12 * 100/125 */
    font-weight: bold;
}

/* This styles the (usually white) text of the example numbers written inside
oval blobs in the extension documentation, which mimic the look of the in-app
documentation. */

.oval, .oval td {
    background-image:url('inform:/doc_images/ovoid.png');
    color:white;
}

/* Styling used in the extension documentation indexes: */

/* Used for extension names in the extensions pane of the app */

span.extensioncensusentry {
    color: var(--extension-index-name-colour);
}

span.extensionindexentry {
    color: var(--extension-index-entry-colour);
}

span.extensionindexerror {
	color: var(--extension-index-error-colour);
}

/* Seen in problem messages: */

span.problemred {
    color: var(--problem-bad-colour);
}

span.problemgreen {
    color: var(--problem-good-colour);
}

span.phraseword {
    color: var(--problem-phrase-colour);
}

span.phrasetokentext {
    color: var(--problem-token-colour);
}

span.phrasetokendesctext {
    color: var(--problem-token-desc-colour);
}

span.phrasetokenvaluetext {
    color: var(--problem-token-value-colour);
}

/* Now we move on to styling used in the Index pages only: */

/* The periodic table display has "sidebars", usually grey and taller than they
are wide; they contain no text. */

div.periodictablesidebarcolour {
    background: var(--periodic-table-sidebar-colour);
}
div.periodictablesidebar:hover {
    background: var(--periodic-table-sidebar-hover-colour);
}

/* The text of the element-abbreviation, such as "Lx" or "Ph", uses: */

span.elementtext {
    color: var(--periodic-table-element-text-colour);
    font-size: 1.333rem; /* 20/12 * 100/125 */
    font-weight: bold;
}

/* Similarly for the "atomic number" - a single digit - in the top left corner
of these boxes: */

span.elementnumbertext {
    color: var(--periodic-table-element-text-colour);
    font-size: 0.622rem; /* 7/12 * 96/72 * 100/125 */
}

/* For the text of the element title, to the right of the element box: */

span.elementtitletext {
    color: var(--periodic-table-element-text-colour);
    font-size: 0.6rem; /* 9/12 * 100/125 */
    font-weight: bold;
}

/* The banner at the top of each element: */

table.elementbanner {
    background: var(--element-banner-background-colour);
}

/* For the typewriting on the Library Card: */

span.librarycardtitle {
    color: var(--library-card-title-colour);
}

span.librarycardother {
    color: var(--library-card-other-colour);
}

/* Generically used for "more details" boxes in the index: */

table.indexmorebox {
	background-color: var(--index-more-box-background-colour);
    border-radius: 8px;
}

/* But not for activity contents: */

table.indexactivitycontents {
	background-color: var(--index-activity-contents-background-colour);
    border-radius: 8px;
}

/* For responses in index entries about rules: */

span.indexresponseletter {
    color: var(--index-response-letter-colour);
    font-family: var(--informmonospaced-fontfamily);
    background-color: var(--index-response-letter-background-colour);
}

span.indexresponsetext {
    color: var(--index-response-text-colour);
}

/* Used ubiquitously throughout the index for unemphasised text: */

span.indexblack {
	color: var(--index-plain-text-colour);
}

span.indexgrey {
	color: var(--index-tinted-text-colour);
}

span.indexdarkgrey {
    color: var(--index-dark-text-colour);
}

span.indexdullred {
    color: var(--index-dull-red-colour);
}

span.indexdullgreen {
    color: var(--index-dull-green-colour);
}

span.indexdullblue {
    color: var(--index-dull-blue-colour);
}

/* Used in the numbering of levels of the World map in the Index */

span.indexmaplevelnumbers {
	color: var(--index-map-room-number-colour);
}

/* Used for the room squares in the World map in the Index (which is currently
a table with one row of one column) */

table.indexmaproom {
	border-color: var(--index-map-room-border-colour);
}

/* Used e.g. for title rows in the Chart of basic kinds in the Index */

tr.headingrow {
	background-color: var(--heading-row-background-colour);
}

/* Standard rows have black text on striped background colours, these being
the usual ones seen in Mac OS X applications such as iTunes. */

tr.stripeone {
	background-color: var(--stripe-one-background-colour);
}

tr.stripetwo {
	background-color: var(--stripe-two-background-colour);
}

tr.tintedrow {
	background-color: var(--stripe-tinted-background-colour);
}

/* In the Figures index, this is the background colour used behind images
(though in fact it will only be visible if the image fails to load, or uses
transparency): */

div.figureindexbox {
	background-color: var(--index-response-text-colour);
}

/* To get the book-contents-page style leaders on the Contents element of
   the index to work, these must use the background colour of the body of
   the page, whatever that is: */

ul.leaders li.leaded span:first-child {
    background: var(--leaders-background-colour);
}
ul.leaders li.leaded span + span {
    background: var(--leaders-background-colour);
}

/* On Registry index pages (such as the Public Library), these are used for
download buttons and the like: */

span.registrybuttontext {
	font-size: 0.733rem; /* 11/12 * 100/125 */
	border-color: var(--registry-button-border-colour);
}

span.registryminibuttontext {
	font-size: 0.667rem; /* 10/12 * 100/125 */
	border-color: var(--registry-button-border-colour);
}

span.registrybuttonuninstalled {
	color: var(--registry-button-text-colour);
	background: var(--registry-uninstalled-button-colour);
}

span.registrybuttoninstalled {
	color: var(--registry-button-text-colour);
	background: var(--registry-installed-button-colour);
	pointer-events: none;
}

span.registrybuttonbuiltin {
	color: var(--registry-builtin-text-colour);
	background: var(--registry-installed-button-colour);
	pointer-events: none;
}

span.registrybuttonupdate {
	color: var(--registry-button-text-colour);
	background: var(--registry-button-update-colour);
}

span.registrybuttonrevert {
	color: var(--registry-button-text-colour);
	background: var(--registry-button-revert-colour);
}

span.registrybuttonrevealer {
	color: var(--registry-button-text-colour);
	background: var(--registry-button-revealer-colour);
}

/* Registry index section headings: */

span.registrysectionname {
    font-family: var(--informdefault-fontfamily);
	-webkit-font-smoothing: antialiased;
	font-size: 1.067rem; /* 16/12 * 100/125 */
	line-height: 1.2rem; /* 18/12 * 100/125 */
}
span.registrysubsectionname {
    font-family: var(--informdefault-fontfamily);
	-webkit-font-smoothing: antialiased;
	font-size: 0.933rem; /* 14/12 * 100/125 */
	line-height: 1.067rem; /* 16/12 * 100/125 */
}

/* These are for the "mark" for a section, usually a section-symbol and number */

span.registrysectionmark {
    font-family: var(--informdefault-fontfamily);
	-webkit-font-smoothing: antialiased;
	font-size: 1.067rem; /* 16/12 * 100/125 */
	line-height: 1.2rem; /* 18/12 * 100/125 */
	var(--registry-section-colour);
}
span.registrysubsectionmark {
    font-family: var(--informdefault-fontfamily);
	-webkit-font-smoothing: antialiased;
	font-size: 0.933rem; /* 14/12 * 100/125 */
	line-height: 1.067rem; /* 16/12 * 100/125 */
	var(--registry-section-colour);
}

/* Text of an item listed in a registry: */

span.registryitemtext {
    font-family: var(--informdefault-fontfamily);
	-webkit-font-smoothing: antialiased;
	font-size: 0.8rem; /* 12/12 * 100/125 */
	line-height: 1.067rem; /* 16/12 * 100/125 */
}

/* And how the links in a registry index page behave: */

a.registrysilentlink {
	text-decoration: none;
	color: var(--registry-contents-silent-link-colour);
}
a.registrybuttonlink {
	text-decoration: none;
}
a.registrycontentslink:link {
	text-decoration: underline;
	text-decoration-style: dotted;
	color: var(--registry-contents-passive-link-colour);
}
a.registrycontentslink:visited {
	text-decoration: underline;
	text-decoration-style: dotted;
	color: var(--registry-contents-passive-link-colour);
}
a.registrycontentslink:hover {
	text-decoration: underline;
	text-decoration-style: dotted;
	color: var(--registry-contents-active-link-colour);
}
a.registrycontentslink:active {
	text-decoration: underline;
	text-decoration-style: dotted;
	color: var(--registry-contents-active-link-colour);
}

/* Buttons for use on inbuild results pages */

button.safebutton {
	background-color: var(--safe-button-background-colour);
	border: none;
	color: var(--button-text-background-colour);
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1.067rem; /* 16/12 * 100/125 */
	margin: 4px 2px;
	cursor: pointer;
}

button.dangerousbutton {
	background-color: var(--dangerous-button-background-colour);
	border: none;
	color: var(--button-text-background-colour);
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1.067rem; /* 16/12 * 100/125 */
	margin: 4px 2px;
	cursor: pointer;
}

/* Used in rendering Markdown in extension documentation */

.markdowncontent p {
	line-height: 1.2rem; /* 18/12 * 100/125 */
}

.markdowncontent em { font-style: italic; }
.markdowncontent strong { font-weight: bold; }
.markdowncontent pre {
	line-height: 1.067rem; /* 16/12 * 100/125 */
}
.markdowncontent code.inlinesourcetext {
	font-size: 90%;
	background-color: var(--md-extract-inform7-box-colour);
	font-family: var(--informdefault-fontfamily);
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	box-sizing: border-box;
	padding-bottom: 2.38px;
	padding-left: 4.76px;
	padding-right: 4.76px;
	padding-top: 2.38px;
	white-space: nowrap;
	width: auto;
}
.markdowncontent code.inlinetranscript {
	background-color: var(--md-transcript-background-colour);
	font-family: var(--informcode-fontfamily);
	font-size: 90%;
	color: var(--syntaxplain-colour);
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	box-sizing: border-box;
	padding-bottom: 2.38px;
	padding-left: 4.76px;
	padding-right: 4.76px;
	padding-top: 2.38px;
	white-space: nowrap;
	width: auto;
}
.markdowncontent code.inlinetranscriptcommand {
	background-color: var(--md-transcript-background-colour);
	text-transform: uppercase;
	font-family: var(--informcode-fontfamily);
	font-size: 90%;
	color: var(--syntaxextract-colour);
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	box-sizing: border-box;
	padding-bottom: 2.38px;
	padding-left: 4.76px;
	padding-right: 4.76px;
	padding-top: 2.38px;
	white-space: nowrap;
	width: auto;
}
.markdowncontent code.inlinecode {
	font-size: 90%;
	font-family: var(--informcode-fontfamily);
	background-color: var(--md-code-background-colour);
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	box-sizing: border-box;
	padding-bottom: 2.38px;
	padding-left: 4.76px;
	padding-right: 4.76px;
	padding-top: 2.38px;
	white-space: nowrap;
	width: auto;
}

.markdowncontent div.extract-transcript {
	margin: 0.75em;
	margin-inline-start: 40px;
	margin-inline-end: 40px;
	padding: 0.75em;
	border: 1px dotted var(--md-dashed-border-colour);
	background-color: var(--md-transcript-background-colour);
}

.markdowncontent div.extract-transcript pre {
	white-space: pre-wrap;
}

.markdowncontent div.extract-code {
	margin: 0.75em;
	padding: 0.75em;
	border: 1px dotted var(--md-dashed-border-colour);
	background-color: var(--md-code-background-colour);
}

.markdowncontent div.extract-problems {
	margin: 0.75em;
	padding: 0.75em;
	border: 1px dotted var(--md-dashed-border-colour);
	background-color: var(--md-extract-problem-box-colour);
}

.markdowncontent blockquote.extract-inform7 {
	padding: 0.75em;
	border: 1px dotted var(--md-dashed-border-colour);
	background-color: var(--md-extract-inform7-box-colour);
}

.markdowncontent blockquote.extract-inform7 td, th {
	border: 0px;
	padding: 0px;
}

.markdowncontent code.language-transcript {
    font-family: var(--informdefault-fontfamily);
}

.markdowncontent div.definition {
	margin: 0.75em;
	padding: 0.75em;
	border: 1px dashed var(--md-dashed-border-colour);
	background-color: var(--md-shaded-box-colour);
}

.markdowncontent div.definition p.defnprototype {
	margin: 0;
	padding: 0;
	text-indent: 0;
}

.markdowncontent table {
	border-spacing: 0;
	border-collapse: collapse;
}

.markdowncontent table th, .markdowncontent table td {
	padding: 4px 10px;
	border: 1px solid var(--light-border-colour);
}

/* Used in syntax-colouring for extension documentation */

span.syntaxdefinition { color: var(--syntaxdefinition-colour); }
span.syntaxheading { color: var(--syntaxheading-colour); text-decoration: underline; }
span.syntaxfunction { color: var(--syntaxfunction-colour); font-style: italic; }
span.syntaxplain { color: var(--syntaxplain-colour); }
span.syntaxelement { color: var(--syntaxelement-colour); }
span.syntaxidentifier { color: var(--syntaxidentifier-colour); }
span.syntaxcharacter { color: var(--syntaxcharacter-colour); }
span.syntaxconstant { color: var(--syntaxconstant-colour); }
span.syntaxstring { color: var(--syntaxstring-colour); }
span.syntaxplain { color: var(--syntaxplain-colour); }
span.syntaxextract { color: var(--syntaxextract-colour); }
span.syntaxcomment { color: var(--syntaxcomment-colour); }

p.documentationerrorbox {
	padding: 6px;
}
span.documentationerror {
	background-color: var(--dangerous-button-background-colour);
	color: var(--button-text-background-colour);
	padding: 15px 32px;
	margin: 4px 2px;
}

/* For example box cues */

div.examplebox {
	margin-top: 6px;
	padding-top: 4px;
	border-width: 1px;
	border-style: inset;
	border-radius: 12px;
	padding-bottom: 4px;
	margin-bottom: 2px;
	border-color: var(--example-cartouche-border-colour);
	background-color: var(--example-cartouche-background-colour);
	height: 100%;
}

div.examplebox:after {
	content: "";
	display: table;
	clear: both;
}
div.examplebox div.exampleleft {
	float: left;
	box-sizing: border-box;
	width: 10%;
	height: 30px;
	padding: 8px 0;
	text-align: center;
}
div.examplebox div.examplemiddle {
	float: left;
	box-sizing: border-box;
	width: 80%;
}
div.examplebox div.exampleright {
	float: left;
	box-sizing: border-box;
	width: 10%;
	height: 30px;
	padding: 8px 0;
	text-align: center;
}

span.examplestars {
	color: var(--example-cartouche-star-colour);
}

span.exampleword {
    color: var(--index-dark-text-colour);
    padding-right: 8px;
}

span.examplename {
	color: var(--index-plain-text-colour);
}

span.exampledescription {
	color: var(--index-plain-text-colour);
}

span.extensionexampleletter {
	color: var(--example-cartouche-label-colour);
	font-size: 0.933rem; /* 14/12 * 100/125 */
	font-weight: bold;
	border-width: 1px;
	background-color: var(--example-cartouche-label-background-colour);
	border-radius: 12px;
	box-sizing: border-box;
	padding-bottom: 4px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 4px;
}

span.extensionexampleseealso {
	color: var(--heading-panel-text-colour);
	font-size: 0.933rem; /* 14/12 * 100/125 */
	font-style: italic;
	background-color: var(--example-see-also-colour);
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	box-sizing: border-box;
	padding-bottom: 4px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	min-width: 30px;
	width: auto;
}

/* For outcome pages */

.outcomeheadingpanellayout {
	position: relative;
	height: 56px;
	padding: 0px;
	white-space:nowrap;
}
.outcomeheadingtext {
	position: absolute;
	top: -4px;
	left: -1px;
	width: 100%;
	padding: 14px 10px 0px 10px;
}
.outcomeheadingrubric {
	position: absolute;
	top: 36px;
	width: 100%;
	padding: 0px 10px 0px 10px;
}

div.outcomebox div.outcomeleft {
	float: left;
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	padding-left: 8px;
	padding-right: 8px;
}
div.outcomebox div.outcomeright {
	margin-left: 120px;
	box-sizing: border-box;
}

/* New-style paste button */

a.actionlink {
	background-color: var(--paste-background-colour);
	text-decoration: none;
	font-size: 80%;
	border-radius: 6px;
	text-transform: uppercase;
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
	border: solid 1px;
	box-shadow: 2px 1px;
}
a.actionlink:link {
	text-decoration: none;
	color: var(--paste-passive-colour);
	border-color: var(--paste-passive-colour);
}
a.actionlink:visited {
	text-decoration: none;
	color: var(--paste-passive-colour);
	border-color: var(--paste-passive-colour);
}
a.actionlink:hover {
	text-decoration: none;
	color: var(--paste-active-colour);
	border-color: var(--paste-active-colour);
}
a.actionlink:active {
	text-decoration: none;
	color: var(--paste-active-colour);
	border-color: var(--paste-active-colour);
}
span.deadactionbutton {
	background-color: var(--paste-background-colour);
	text-decoration: none;
	font-size: 80%;
	border-radius: 6px;
	text-transform: uppercase;
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
	border: solid 1px;
}

/* (1) General layout material */

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.headingpanellayout {
	position: relative;
	height: 56px;
	padding: 0px;
	white-space:nowrap;
}
.headingpanellayoutdeeper {
	position: relative;
	height: 117px;
	padding: 0px;
	white-space:nowrap;
}
.headingtext {
	position: absolute;
	top: -4px;
	left: -1px;
	width: 100%;
	padding: 14px 10px 0px 10px;
}
.headingrubric {
	position: absolute;
	top: 36px;
	width: 100%;
	padding: 0px 10px 0px 10px;
}
h3.tighter {
	margin-top: 0px;
}
p.hang {
	padding-left: 25px;
	text-indent: -25px;
	margin-top: 0px;
	margin-bottom: 0px;
}
p.in1 {
	padding-left: 0px;
}
p.tightin1 {
	padding-left: 0px;
	margin-top: 2px;
	margin-bottom: 2px;
}
p.halftightin1 {
	padding-left: 0px;
	margin-bottom: 2px;
}
p.hangingin1 {
	padding-left: 50px;
	text-indent: -50px;
	margin-top: 0px;
	margin-bottom: 1px;
}
p.in2 {
	padding-left: 25px;
}
p.tightin2 {
	padding-left: 25px;
	margin-top: 2px;
	margin-bottom: 2px;
}
p.halftightin2 {
	padding-left: 25px;
	margin-bottom: 2px;
}
p.hangingin2 {
	padding-left: 75px;
	text-indent: -50px;
	margin-top: 0px;
	margin-bottom: 1px;
}
p.in3 {
	padding-left: 50px;
}
p.tightin3 {
	padding-left: 50px;
	margin-top: 2px;
	margin-bottom: 2px;
}
p.halftightin3 {
	padding-left: 50px;
	margin-bottom: 2px;
}
p.hangingin3 {
	padding-left: 100px;
	text-indent: -50px;
	margin-top: 0px;
	margin-bottom: 1px;
}
p.in4 {
	padding-left: 75px;
}
p.tightin4 {
	padding-left: 75px;
	margin-top: 2px;
	margin-bottom: 2px;
}
p.halftightin4 {
	padding-left: 75px;
	margin-bottom: 2px;
}
p.hangingin4 {
	padding-left: 125px;
	text-indent: -50px;
	margin-top: 0px;
	margin-bottom: 1px;
}
p.in5 {
	padding-left: 100px;
}
p.tightin5 {
	padding-left: 100px;
	margin-top: 2px;
	margin-bottom: 2px;
}
p.halftightin5 {
	padding-left: 100px;
	margin-bottom: 2px;
}
p.hangingin5 {
	padding-left: 150px;
	text-indent: -50px;
	margin-top: 0px;
	margin-bottom: 1px;
}
p.in6 {
	padding-left: 125px;
}
p.tightin6 {
	padding-left: 125px;
	margin-top: 2px;
	margin-bottom: 2px;
}
p.halftightin6 {
	padding-left: 125px;
	margin-bottom: 2px;
}
p.hangingin6 {
	padding-left: 175px;
	text-indent: -50px;
	margin-top: 0px;
	margin-bottom: 1px;
}
p.in7 {
	padding-left: 150px;
}
p.tightin7 {
	padding-left: 150px;
	margin-top: 2px;
	margin-bottom: 2px;
}
p.halftightin7 {
	padding-left: 150px;
	margin-bottom: 2px;
}
p.hangingin7 {
	padding-left: 200px;
	text-indent: -50px;
	margin-top: 0px;
	margin-bottom: 1px;
}
p.in8 {
	padding-left: 175px;
}
p.tightin8 {
	padding-left: 175px;
	margin-top: 2px;
	margin-bottom: 2px;
}
p.halftightin8 {
	padding-left: 175px;
	margin-bottom: 2px;
}
p.hangingin8 {
	padding-left: 225px;
	text-indent: -50px;
	margin-top: 0px;
	margin-bottom: 1px;
}
p.in9 {
	padding-left: 200px;
}
p.tightin9 {
	padding-left: 200px;
	margin-top: 2px;
	margin-bottom: 2px;
}
p.halftightin9 {
	padding-left: 200px;
	margin-bottom: 2px;
}
p.hangingin9 {
	padding-left: 250px;
	text-indent: -50px;
	margin-top: 0px;
	margin-bottom: 1px;
}

/* (2) Index page layout material */

/* The periodic table display has "sidebars", usually grey and taller than they
are wide; they contain no text. */

div.periodictablesidebar {
	height: 56px;
	width: 16px;
}
.periodictablesidebar a:link { text-decoration: none; }
.periodictablesidebar a:visited { text-decoration: none; }
.periodictablesidebar a:active { text-decoration: none; }

/* The "element boxes" are the cells appearing in the periodic-table display
on the welcome page of the index: */

.elementbox {
	position: relative;
	height: 56px;
	width: 56px;
	padding: 0px;
}

.elementbox a:link { text-decoration: none; }
.elementbox a:visited { text-decoration: none; }
.elementbox a:active { text-decoration: none; }
.elementbox a:hover { text-decoration: none; }
.elementbox:hover {
	opacity: 0.6;
}

/* The "small element boxes" look like those, but are smaller, and used on
the headings of the content which those original boxes link to: */

.smallelementbox {
	position: relative;
	height: 40px;
	width: 40px;
	padding: 0px;
}

.smallelementbox a:link { text-decoration: none; }
.smallelementbox a:visited { text-decoration: none; }
.smallelementbox a:active { text-decoration: none; }
.smallelementbox a:hover { text-decoration: none; }
.smallelementbox:hover {
	opacity: 0.6;
}

/* This is a class for the links formed by the element boxes: */

a.elementlink {
	position: absolute;
	top: -4px;
	left: -1px;
	width: 100%;
	padding: 14px 0px 14px 1px;
	text-align: center;
}

/* Similarly for the "atomic number" - a single digit - in the top left corner
of these boxes: */

div.elementnumber {
	position: absolute;
	top: 1px;
	left: 3px;
	text-align: left;
}

/* For the text of the element title, to the right of the element box: */

div.elementtitle {
	position: absolute;
	top: 35px;
	width: 100%;
	text-align: center;
}

/* Used for the book-contents-page style leaders on the Contents element of
   the index: */

ul.leaders {
	padding: 0;
	margin-top: 1px;
	margin-bottom: 0;
	overflow-x: hidden;
	list-style: none}
ul.leaders li.leaded:before {
	float: left;
	width: 0;
	white-space: nowrap;
	content:
	".  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  "
	".  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  "
	".  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  "
	".  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  "
	".  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  "
	".  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  "
	".  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  "
	".  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  "
	".  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  "
	".  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  "}
ul.leaders li.leaded span:first-child {
	padding-right: 0.33em;
}
ul.leaders li.leaded span + span {
	float: right;
	padding-left: 0.33em;
}
li.indent1 span:first-child {
	padding-left: 25px;
}
li.indent2 span:first-child {
	padding-left: 50px;
}
li.indent3 span:first-child {
	padding-left: 75px;
}
li.indent4 span:first-child {
	padding-left: 100px;
}
li.indent5 span:first-child {
	padding-left: 125px;
}
li.indent6 span:first-child {
	padding-left: 150px;
}
li.indent7 span:first-child {
	padding-left: 175px;
}
li.indent8 span:first-child {
	padding-left: 200px;
}
li.indent9 span:first-child {
	padding-left: 225px;
}

li.unleaded:before {
	content: "";
}

/* Used for the contents pages in extensions indexes: */

ul.extensioncontents {
	padding: 0;
	margin-top: 4px;
	overflow-x: hidden;
	list-style: none
}

li.exco1 {
	margin-top: 4px;
	padding-left: 0px;
	margin-bottom: 6px;
}

li.exco2 {
	padding-left: 20px;
	margin-bottom: 6px;
}

li.exco3 {
	padding-left: 40px;
	margin-bottom: 6px;
}

p.extensionsubheading {
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 12px;
	margin-bottom: 4px;
}

/* Miscellaneous extension documentation styles: */

div.documentation p {
	font-size: 13px;
	line-height: 18px;
}

div.documentation blockquote {
	font-size: 12px;
	line-height: 17px;
}

div.documentation div.definition {
	margin: 0.75em;
	padding: 0.75em;
	border: 1px dashed var(--md-dashed-border-colour);
	background-color: var(--md-shaded-box-colour);
}

div.definition p.defnprototype {
	margin: 0;
	padding: 0;
	text-indent: 0;
	font-weight: bold;
}

/* On Registry index pages (such as the Public Library), these are used for
download buttons and the like: */

span.registrybuttons {
	height: 20px;
	padding: 2px 8px 2px 8px;
	margin: 2px;
	border:1px solid;
	border-radius: 5px;
}

span.registryminibuttons {
	height: 14px;
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border:1px solid;
	border-radius: 4px;
}

/* Used to hide or display sections in the Registry pages: */

div.registrysectionitemsopen {
	display: block;
}

div.registrysectionitemsclosed {
	display: none;
}

/* Hanging indentation for Registry item paragraphs: */

p.registryitem {
	padding-left: 80px;
	text-indent: -40px;
}

p.registryaddition {
	padding-left: 40px;
	text-indent: -40px;
}

/* General index for inbuild-generated documents: */

div.generalindex p {
	font-size: 16px;
	line-height: 20px;
}

div.generalindex td {
	font-size: 16px;
	line-height: 20px;
}

/* This is used for the horizontal row of link letters from A to Z */

div.generalindex td.letterinrow {
	width: 3.846%; /* 3.846 = 1/26 to pretty good accuracy */
	height: 30px;
	text-align: center;
	vertical-align: middle;
	background-color: var(--documentation-index-letter-passive-bg-colour);
}

div.generalindex td.letterinrow: hover {
	background-color: var(--documentation-index-letter-active-bg-colour);
}

/* This is used to hold the "majuscule" A-Z letters left of the alpha index */

div.generalindex td.letterblock {
	width: 38px;
	text-align: left;
	vertical-align: top;
}

/* Which contains links like so: */

div.generalindex a.letterlink:link, div.generalindex a.letterlink:visited {
	text-decoration: none;
	color: var(--documentation-nav-passive-link-colour);
	font-size: 0.75em;
	font-weight: bold;
}

div.generalindex a.letterlink:hover, div.generalindex a.letterlink:active {
	text-decoration: none;
	color: var(--documentation-nav-active-link-colour);
	font-size: 0.75em;
	font-weight: bold;
}

/* A single letter of majuscule is held in this tinted box: */

div.generalindex div.majuscule {
	width: 30px;
	height: 30px;
	text-align: center;
	vertical-align: middle;
	background-color: var(--documentation-index-majuscule-colour);
	display: table-cell;
}

/* But a wider text (such as used in other index headings) is held in this: */

div.generalindex div.stretchymajuscule {
	height: 30px;
	text-align: center;
	vertical-align: middle;
	background-color: var(--documentation-index-majuscule-colour);
}

/* Either way, the actual lettering inside uses this: */

div.generalindex span.majusculelettering {
	font-size: 0.75em;
	color: var(--documentation-index-majuscule-letter-colour);
}

div.generalindex table.fullwidth {
	border-collapse: collapse;
	width: 100%;
}

div.generalindex table.fullwidth td, div.generalindex table.fullwidth th {
    padding: 0;
}

div.generalindex table.fullwidtharch {
    border-spacing: 6px;
    border-collapse: separate;
	width: 100%;
}

div.generalindex table.fullwidtharch td, div.generalindex table.fullwidtharch th {
    padding: 0;
}

div.generalindex table.indextable {
	border-collapse: collapse;
	width: 100%;
	margin-top: 8px;
}

div.generalindex p.indexentry {
	font-size: 0.8em;
	margin-top: 0px;
	margin-bottom: 4px;
	text-indent: -2em;
	padding-left: 2em;
}

div.generalindex a.indexlink {
	color: var(--dotted-link-underline-colour);
	text-decoration: none;
	border-bottom: 1px dotted var(--dotted-link-underline-colour);
}

div.generalindex a.indexseelink {
	text-decoration: none;
	border-bottom: 1px dotted var(--dotted-link-underline-colour);
}

div.generalindex a.indexlinkalt {
	color: var(--dotted-link-underline-colour);
	text-decoration: none;
	border-bottom: 1px dotted var(--dotted-link-underline-colour);
	font-style: italic;
}

div.generalindex span.indexgloss {
	font-size: 0.7em;
	font-style: italic;
	color: var(--documentation-index-gloss-colour);
}

div.generalindex span.indexsee {
	font-style: italic;
	color: var(--documentation-index-see-colour);
}

div.generalindex span.indexstandard {
}

div.generalindex span.indexsource {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexsourcearg {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexsourceargbracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexsourcepartbracketed {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexphrase {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexphrasebracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexifphrase {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexifphrasebracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexsayphrase {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexsayphrasebracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexoutphrase {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexoutphrasebracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexassert {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexassertbracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexrb {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexrbbracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexprop {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexpropbracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexpropcat {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexpropcatbracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexadj {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexadjbracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexrelbracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexrelcatbracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexrelverb {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexglob {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexglobbracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexactvar {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexactvarbracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexconst {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexconstbracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexaction {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexactionbracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexactivity {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexactivitycat {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexdescactivity {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexexample {
	font-style: italic;
}

div.generalindex span.indextitle {
	font-style: italic;
}

div.generalindex span.indexofsourcebracketed {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexuseopt {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indextoken {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indextokenbracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexcue {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexcuebracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexperfnote {
	color: var(--documentation-index-a-colour);
    font-family: var(--informcode-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexperfnotebracketed {
	color: var(--documentation-index-b-colour);
    font-family: var(--informdefault-fontfamily);
	font-style: italic;
}

div.generalindex span.indexcommand {
	color: var(--documentation-index-c-colour);
	font-family: var(--informcommand-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indextestcmd {
	color: var(--documentation-index-c-colour);
	font-family: var(--informcommand-fontfamily);
	font-size: 0.9em;
}

div.generalindex span.indexcommandpartbracketed {
	color: var(--documentation-index-c-colour);
	font-family: var(--informcommand-fontfamily);
	font-size: 0.9em;
}

/* In Midnight, there's a black status line at the top of each page, made
as a "fullwidth" table which also has this class: */

div.midnight, div.midnight td {
	font-size: 16px;
	line-height: 20px;
}

div.midnight table.fullwidth {
	border-collapse: collapse;
	width: 100%;
}

div.midnight table.midnightblack {
	background-color: var(--documentation-duplex-paper-colour);
}

/* The table is a single row of three cells: */

div.midnight td.midnightbannerleftcell {
	height: 26px;
	width: 38px;
	text-align: center;
	vertical-align: middle;
}

div.midnight td.midnightbannercentrecell {
	text-align: left;
	vertical-align: middle;
}

div.midnight td.midnightbannerrightcell {
	height: 26px;
	width: 56px;
	text-align: right;
	vertical-align: middle;
	white-space: nowrap;
}

/* Within the centre cell, the running-head text is styled with: */

div.midnight span.midnightbannertext {
	color: var(--documentation-nav-background-colour);
	font-size: 0.75em;
}

/* Midnight pages end with a Previous - Contents - Next footer area, which is
done with a table using the following cells */

div.midnight td.footerprevious {
	width: 33%;
	text-align: left;
}

div.midnight td.footercontents {
	width: 33%;
	text-align: center;
}

div.midnight td.footernext {
	width: 33%;
	text-align: right;
}

/* Midnight features an elaborate contents page in two columns. */

div.midnight td.midnightlefthalfpage {
	background-color: var(--documentation-duplex-left-colour);
	width: 50%;
	text-align: left;
	vertical-align: top;
}

div.midnight td.midnightrighthalfpage {
	background-color: var(--documentation-duplex-right-colour);
	width: 50%;
	text-align: left;
	vertical-align: top;
}

/* There are A- and B-level subheadings: */

div.midnight p.midnightcontentsA {
	font-size: 0.8em;
	margin-top: 2px;
    margin-bottom: 0px;
    text-indent: -3em;
    margin-left: 3em;
    margin-right: 1em;
    padding-left: 15px;
}

div.midnight p.midnightcontentsB {
	font-size: 0.75em;
	margin-top: 2px;
    margin-bottom: 0px;
    text-indent: -2em;
    margin-left: 4em;
    margin-right: 1em;
    padding-left: 6px;
}

div.midnight div.headingboxhigh {
	position: relative;
	height: 117px;
	padding: 0px;
	white-space:nowrap;
	background: var(--documentation-nav-heading-background-colour);
    font-family: var(--informdefault-fontfamily);
	-webkit-font-smoothing: antialiased;
}

div.midnight .headingtext {
	position: absolute;
	top: -4px;
	left: -1px;
	width: 100%;
    color: var(--documentation-nav-heading-colour);
	padding: 14px 10px 0px 10px;
	font-size: 20px;
	font-weight: bold;
}

div.midnight .headingrubric {
	position: absolute;
	top: 36px;
	width: 100%;
    color: var(--documentation-nav-heading-colour);
	padding: 0px 10px 0px 10px;
	font-size: 11px;
	font-weight: bold;
}

div.midnight a:link {										/* unvisited link */
	text-decoration: none;
	color: var(--documentation-nav-passive-link-colour);
}
div.midnight a:visited {									/* visited link */
	text-decoration: none;
	color: var(--documentation-nav-passive-link-colour);
}
div.midnight a:hover {										/* mouse over link */
	text-decoration: none;
	color: var(--documentation-nav-active-link-colour);
}
div.midnight a:active {										/* selected link */
	text-decoration: none;
	color: var(--documentation-nav-active-link-colour);
}

div.duplexleftpage {
	background-color: var(--documentation-duplex-left-colour);
}

div.duplexrightpage {
	background-color: var(--documentation-duplex-right-colour);
}

img.thinbordered {
	border-style: solid;
	border-width: 1px;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

div.skeinreport p.skeinerror {
	font-weight: bold;
}

div.skeinreport p.node {
	margin: 0.75em;
	padding: 0.75em;
	border: 1px dotted var(--md-dashed-border-colour);
	background-color: var(--md-transcript-background-colour);
}

div.skeinreport span.deletion {
	text-decoration: line-through;
	text-decoration-color: var(--md-transcript-deletion-colour);
}

div.skeinreport span.insertion {
	text-decoration: underline;
	text-decoration-color: var(--md-transcript-insertion-colour);
}
